<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :summary-method="getSummaries"
      show-summary
    >
      <el-table-column type="index" width="30" align="center">
      </el-table-column>
      <el-table-column
        v-for="(item, index) in 4"
        :label="`#${item}卸船机`"
        :key="item"
        header-align="center"
      >
        <el-table-column label="船号" header-align="center">
          <template #default="{ row }">
            <el-input
              type="textarea"
              rows="2"
              size="mini"
              v-model="row[index * 3 + 1]"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="吨位" header-align="center">
          <template #default="{ row }">
            <el-input
              type="textarea"
              rows="2"
              size="mini"
              v-model="row[index * 3 + 2]"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" header-align="center">
          <template #default="{ row }">
            <el-input
              type="textarea"
              rows="2"
              size="mini"
              v-model="row[index * 3 + 3]"
            ></el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="#0固定吊机" header-align="center">
        <el-table-column label="船号" header-align="center">
          <template #default="{ row }">
            <el-input
              type="textarea"
              rows="2"
              size="mini"
              v-model="row[13]"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="吨位" header-align="center">
          <template #default="{ row }">
            <el-input
              type="textarea"
              rows="2"
              size="mini"
              v-model="row[14]"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" header-align="center">
          <template #default="{ row }">
            <el-input
              type="textarea"
              rows="2"
              size="mini"
              v-model="row[15]"
            ></el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <el-button size="mini" @click="handleAdd(scope.row)">增加</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-divider>输煤统计</el-divider>

    <el-descriptions title="J7A1电子秤读数" size="mini" :column="4" border>
      <el-descriptions-item label="起始数">
        <el-input size="mini" v-model="total[1]"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="结束数"
        ><el-input size="mini" v-model="total[2]"></el-input
      ></el-descriptions-item>
      <el-descriptions-item label="累计数"
        ><el-input size="mini" v-model="total[3]"></el-input
      ></el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="J7B1电子称读数"
      size="mini"
      :column="4"
      border
      style="margin-top: 20px"
    >
      <el-descriptions-item label="起始数">
        <el-input size="mini" v-model="total[4]"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label="结束数"
        ><el-input size="mini" v-model="total[5]"></el-input
      ></el-descriptions-item>
      <el-descriptions-item label="累计数"
        ><el-input size="mini" v-model="total[6]"></el-input
      ></el-descriptions-item>
      <el-descriptions-item label="上仓量">
        <el-input size="mini" v-model="total[7]"></el-input>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {}
  },
  created () {
    console.log(this.tableData)
  },
  methods: {
    handleAdd (row) {
      this.tableData.push({
        id: Math.random()
      })
    },
    handleDelete (row) {
      this.tableData = this.tableData.filter((item) => item.id !== row.id)
    },
    getSummaries (param) {
      console.log(param)
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (
          index === 1 ||
          index === 4 ||
          index === 7 ||
          index === 10 ||
          index === 13
        ) {
          sums[index] = '卸煤小计:'
          return
        }
        if (
          index === 2 ||
          index === 5 ||
          index === 8 ||
          index === 11 ||
          index === 14
        ) {
          let sum = 0
          data.forEach((item) => {
            !isNaN(item[index]) && (sum += Number(item[index]))
          })
          sums[index] = sum
        }
      })

      return sums
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .el-input__inner {
  padding: 0;
  border: none;
}

/deep/ .el-textarea__inner {
  font-size: 18px;
  border: none;
  resize: none;
  padding: 0;
}

.topStyle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.disable-click {
  pointer-events: none;
}

::v-deep .el-table__cell {
  padding: 0;
}

::v-deep .cell {
  padding-left: 0;
  padding-right: 0;
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 0;
}
</style>
